<script setup lang="ts">
import type { FormInstance, FormRules } from 'element-plus'

const userStore = useUserStore()

const passwordEl = ref<FormInstance>()
const passwordVisible = ref(false)
const passwordForm = ref({
  oldPassword: '',
  newPassword: '',
  confirmPassword: '',
})

function confirmPassword(rule: any, value: any, callback: any) {
  if (value === '') {
    callback(new Error('请确认新密码'))
  } else if (value !== passwordForm.value.newPassword) {
    callback(new Error('新密码不一致，请重新输入'))
  } else {
    callback()
  }
}
const passwordRules = reactive<FormRules<typeof passwordForm>>({
  oldPassword: [
    { required: true, message: '请输入旧密码', trigger: 'blur' },
    { min: 6, message: '密码长度至少为6位', trigger: 'blur' },
    { max: 12, message: '密码长度最多为12位', trigger: 'blur' },
  ],
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, message: '密码长度至少为6位', trigger: 'blur' },
    { max: 12, message: '密码长度最多为12位', trigger: 'blur' },
  ],
  confirmPassword: [{ validator: confirmPassword, trigger: 'blur' }],
})

function editPassword() {
  passwordVisible.value = true
}
async function submitNewPassword() {
  await passwordEl.value?.validate(async (valid) => {
    if (valid) {
      try {
        await userStore.changePassword({ ...passwordForm.value })
        userStore.logout()
      } finally {
        cancelPassword()
      }
    }
  })
}
function cancelPassword() {
  if (passwordEl.value) {
    passwordEl.value.resetFields()
  }
  passwordVisible.value = false
  passwordForm.value = {
    oldPassword: '',
    newPassword: '',
    confirmPassword: '',
  }
}
</script>

<template>
  <div class="mx-auto h-full">
    <div class="flex items-center gap-2 text-lg">
      <div class="i-carbon-user" />
      <div>个人信息</div>
    </div>
    <el-form label-width="auto" class="mt-4">
      <el-form-item label="账号:">
        <p>{{ userStore.info?.account }}</p>
      </el-form-item>
      <el-form-item label="密码:">
        <p>******</p>
        <el-button class="ml-10" @click="editPassword"> 变更 </el-button>
      </el-form-item>
      <!-- <el-form-item label="手机号:">
        <p>{{ userStore.info?.phone }}</p>
      </el-form-item> -->
    </el-form>
    <el-dialog v-model="passwordVisible" width="400" :show-close="false">
      <template #header>
        <div class="flex items-center justify-between">
          <div class="flex items-center gap-2 text-lg font-medium">
            <div class="bg-primary p-0.5">
              <div class="i-carbon-locked bg-white" />
            </div>
            <h3>修改密码</h3>
          </div>
          <div class="i-carbon-close cursor-pointer text-xl" @click="cancelPassword" />
        </div>
      </template>
      <el-form
        ref="passwordEl"
        :model="passwordForm"
        label-width="80px"
        label-position="left"
        :rules="passwordRules"
      >
        <el-form-item label="旧密码:" prop="oldPassword">
          <el-input
            v-model="passwordForm.oldPassword"
            placeholder="请输入旧密码"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="新密码:" prop="newPassword">
          <el-input
            v-model="passwordForm.newPassword"
            type="password"
            show-password
            placeholder="请输入新密码"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="确认密码:" prop="confirmPassword">
          <el-input
            v-model="passwordForm.confirmPassword"
            type="password"
            show-password
            placeholder="请确认密码"
            autocomplete="off"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="cancelPassword"> 取消 </el-button>
          <el-button type="primary" @click="submitNewPassword"> 确认 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
